/**
 * Created by zzc on 2017/9/11.
 */
import React from 'react';

import {
    View,
    Image,
    Text,
    Platform,
    StyleSheet,
    ScrollView,
    TouchableOpacity
} from 'react-native';

import {deviceWidth} from '../../base/util/ScreenUtil'
import MineServiceContent from './MineServiceContent'
import MineManageContent from './MineManageContent'
import DeviceStorage from "../../base/util/DeviceStorage";

export default class MineScene extends React.Component {

    constructor(props){
        super(props);
    }

    async _gotoLoginOrUserInfo(){
        let value = await DeviceStorage.get("UserInfo");
        console.log(value);
        if(value != null){
            console.log('UserInfo');
            this.props.navigation.navigate('UserInfo');
        }else{
            console.log('Login');
            this.props.navigation.navigate('Login', { transition: 'forVertical' });
        }
    }

    _

    render() {
        return (
            <ScrollView style={styles.container}>
                <View style={{height:180,flexDirection:'column'}}>
                    <Image source = {require('../../resource/images/person_bg.jpg')} style={styles.image} ></Image>

                    <TouchableOpacity style={styles.containerChild} onPress={()=>this._gotoLoginOrUserInfo()}>
                        <Image source = {require('../../resource/images/icon_default_head_image.png')} style={styles.imageHead}></Image>
                        <View style={{flexDirection:'column',marginLeft:10}}>

                            <View style={{flexDirection:'row',alignItems:'center'}}>

                                <Text style={{color:'white',fontSize:18}}>saky</Text>

                                <Text style={styles.state}>未认证</Text>

                            </View>

                            <Text style={styles.data}>个人资料</Text>

                        </View>
                    </TouchableOpacity>
                </View>

                <View style={{height:45,flexDirection:'row',alignItems:'center',justifyContent:'center',backgroundColor:'white'}}>

                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>

                        <Image source={require('../../resource/images/icon_minefragment_collection.png')} style={{width:25,height:25}}/>
                        <Text style={{color:'black',fontSize:15,marginLeft:3}}>我的收藏</Text>
                    </View>

                    <View style={{width:1,height:25,backgroundColor:'#E5E5E5'}}></View>

                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>

                        <Image source={require('../../resource/images/icon_minefragment_coupon.png')} style={{width:25,height:25}}/>
                        <Text style={{color:'black',fontSize:15,marginLeft:3}}>优惠券</Text>
                    </View>
                </View>


                <View style={{flexDirection:'column',marginTop:10,backgroundColor:'white'}}>

                    <View style={{justifyContent:'center',flexDirection:'row',alignItems:'center',marginBottom:15,marginTop:10}}>
                        <Image source={require('../../resource/images/icon_minefragment_left.png')} style={{width:30,height:1,resizeMode:'cover'}}/>
                        <Text style={{marginLeft:3,marginRight:3}}>租客服务</Text>
                        <Image source={require('../../resource/images/icon_minefragment_right.png')} style={{width:30,height:1,resizeMode:'cover'}}/>
                    </View>

                    <MineServiceContent />

                </View>

                <View style={{flexDirection:'column',marginTop:10,backgroundColor:'white'}}>

                    <View style={{justifyContent:'center',flexDirection:'row',alignItems:'center',marginBottom:15,marginTop:10}}>
                        <Image source={require('../../resource/images/icon_minefragment_left.png')} style={{width:30,height:1,resizeMode:'cover'}}/>
                        <Text style={{marginLeft:3,marginRight:3}}>综合管理</Text>
                        <Image source={require('../../resource/images/icon_minefragment_right.png')} style={{width:30,height:1,resizeMode:'cover'}}/>
                    </View>

                    <MineManageContent />
                </View>

                <View style={{height:30}}></View>
            </ScrollView>
        );
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: Platform.OS == 'ios' ? 20 : 0,
        backgroundColor:'#F7F8FA',
    },
    containerChild: {
        flex: 1,
        height:60,
        flexDirection:'row',
        alignItems:'center',
        marginLeft:20,
        marginTop:90,
        position:'absolute'
    },
    title: {
        fontSize: 18,
        height: 84,
        textAlign: 'center'
    },
    image:{
        width:deviceWidth,
        height:180,
    },
    imageHead:{
        width:60,
        height:60,
    },
    state:{
        backgroundColor:'#2B2B2B',
        borderWidth:1,
        paddingLeft:3,
        paddingRight:3,
        paddingTop:1,
        paddingBottom:1,
        fontSize:8,
        marginLeft:3,
        borderRadius:1,
        marginTop:2,
        color:'#ffffff'
    },
    data:{
        borderColor:'#ffffff',
        borderWidth:1,
        paddingLeft:5,
        paddingRight:5,
        paddingTop:3,
        paddingBottom:3,
        borderRadius:2,
        fontSize:13,
        marginTop:5,
        textAlign:'center',
        color:'#ffffff'
    }
})
